<template>
  <div>
    <el-tabs v-model="tabActive">
      <el-tab-pane :label="$t('im.imChat.components.customerList.components.searchList.all')" name="all">
        <template v-if="_tabTitleArr.length === 0">
          <no-data-view-new></no-data-view-new>
        </template>
        <template v-else>
          <div v-for="item in _tabTitleArr" :key="item" class="tab-item">
            <div class="tab-item-title">
              <span>{{ comprehensiveMap[item] }}</span>
            </div>
            <SearchItem
              v-if="comprehensiveList[`${item}InfoList`]"
              :list="comprehensiveList[`${item}InfoList`].slice(0, 3)"
              :tab-name="item"
              :keywords="keywords"
              @updateList="updateList"
            />
            <div
              class="tab-item-more"
              @click="tabActive = item"
              v-if="
                comprehensiveList[`${item}InfoList`] &&
                comprehensiveList[`${item}InfoList`].length > 3
              "
            >
              {{ $t('im.imChat.components.customerList.components.searchList.more') }}
            </div>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane
        v-for="item in _tabTitleArr"
        :key="item"
        :label="comprehensiveMap[item]"
        :name="item"
      >
        <SearchItem
          :list="comprehensiveList[`${item}InfoList`]"
          :tab-name="item"
          :keywords="keywords"
          @updateList="updateList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { comprehensiveSearch } from '@src/api/ImApi.js';
import SearchItem from '@src/modules/im/imChat/components/costomList/searchItem.vue';
import NoDataViewNew from '@src/component/common/NoDataViewNew';

export default {
  components: {
    SearchItem,
    NoDataViewNew,
  },
  props: {
    keywords: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      tabActive: 'all',
      comprehensiveMap: {
        all: this.$t('im.imChat.components.customerList.components.searchList.all'),
        linkman: this.$t('im.imChat.components.customerList.components.searchList.linkman'),
        imMessage: this.$t('im.imChat.components.customerList.components.searchList.imMessage'),
        customer: this.$t('im.imChat.components.customerList.components.searchList.customer'),
      },
      tabTitleArr: ['linkman', 'imMessage', 'customer'],
      keyWord: '',
      comprehensiveList: {},
    };
  },
  computed: {
    _tabTitleArr() {
      return this.tabTitleArr.filter(
        v =>
          this.comprehensiveList[`${v}InfoList`] &&
          this.comprehensiveList[`${v}InfoList`].length
      );
    },
  },
  emits: ['updateList'],
  methods: {
    async getComprehensiveSearch(keyWord) {
      try {
        if (keyWord) this.keyWord = keyWord;
        this.tabActive = 'all';

        const params = {
          keyWord: this.keyWord,
          // 1:综合搜索, 2:客户搜索, 3:联系人搜索, 4:聊天记录搜索
          searchType: 1,
        };
        const { code, data, message } = await comprehensiveSearch(params);

        if (code !== 0) return this.$message.error(message);
        this.comprehensiveList = data;
      } catch (error) {
        console.error('getComprehensiveSearch error', error);
      }
    },
    updateList(item) {
      this.$emit('updateList', item);
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-item {
  width: 100%;
  // margin-bottom: 8px;
  border-bottom: 1px solid #e1e3e2;

  &-title {
    height: 34px;
    padding: 0 16px;
    width: 100%;
    line-height: 34px;
    color: #8c8c8c;
  }

  &-more {
    width: 100%;
    height: 34px;
    line-height: 34px;
    padding: 0 16px;
    color: $color-primary-light-6;
    cursor: pointer;
  }
}

.el-tabs__header {
  margin-bottom: 5px;
}
</style>
